<template>
<div class="tasks">
  <v-nav :path="path" :title="title"></v-nav>
  <v-tabs type="tab" class-name="tasks-tabs">
    <v-tab name="all-tasks" title="近期活动" status="active"
    distance="55" v-pull-to-refresh="refreshAll">
      <v-layer></v-layer>
      <div class="allTasks">
           <div class="card">
	    <div class="card-header"><div style="margin:0px auto;">活动1</div></div>
	    <div class="card-content">
	      <div><span class="icon icon-shouyi" style="padding:10px;"></span>活动时间</div>
	      <div><span class="icon icon-shouyi" style="padding:10px;"></span>活动地点</div>
	      <div style="display:inline-block;background-color:red;color:white;">活动介绍</div>
	      <div class="card-content-inner">头和尾的卡片。卡头是用来显示一些额外的信息，或自定义操作卡标题和页脚。</div>
	      <div>活动报名要求</div>
	    </div>
	    <div class="card-footer"><a class="sub-btn" v-link="{path: '/travel/merger/detail',replace: true}">活动在线报名</a></div>
	  </div>
	   <div class="card">
	    <div class="card-header"><div style="margin:0px auto;">活动1</div></div>
	    <div class="card-content">
	      <div><span class="icon icon-shouyi" style="padding:10px;"></span>活动时间</div>
	      <div><span class="icon icon-shouyi" style="padding:10px;"></span>活动地点</div>
	      <div style="display:inline-block;background-color:red;color:white;">活动介绍</div>
	      <div class="card-content-inner">头和尾的卡片。卡头是用来显示一些额外的信息，或自定义操作卡标题和页脚。</div>
	      <div>活动报名要求</div>
	    </div>
	    <div class="card-footer"><a class='sub-btn' v-link="{path: '/travel/merger/detail',replace: true}">活动在线报名</a></div>
	  </div>
      </div>
    </v-tab>
    <v-tab name="my-tasks" title="我的活动足迹"
    distance="55" v-pull-to-refresh="refreshMine">
      <v-layer></v-layer>
	  <div class="list"
	    v-infinite-scroll="loadMore">
	      <div class="list-block infinite-list">
		<ul>
		  <li class="item-content" v-for="item in items" track-by="$index">
		    <div class="item-media"><i class="icon icon-dianji"></i></div>
		    <div class="item-inner">
		      <div class="item-title">活动标题</div>
		      <div class="item-after">{{item.name}}</div>
		    </div>
		  </li>
		</ul>
	      </div>
	    </div>
	  </div>
    </v-tab>
  </v-tabs>
</div>
</template>
<script>
import $ from 'zepto'
import VNav from '../../components/Nav'
import VButton from '../../components/Button'
import VIcon from '../../components/Iconfont'
import VTabs from '../../components/Tabs'
import VTab from '../../components/Tab'
import VLayer from '../../components/PullToRefreshLayer'
import VCardContainer from '../../components/Card'
import Card from '../../components/CardItem'
import {loader} from '../../util/util'

export default {
  route: {
    data ({from, next}) {
      if (from.path === '/user') {
        this.path = from.path
      }
    }
  },
  ready () {
    for (let i = 0; i < 15; i++) {
      this.items.push({
        id: i,
        name: `demo${i + 1}`
      })
    }
    $.init()
    $(document).on('click', '.create-actions', function () {
      const buttons1 = [
        {
          text: '请选择',
          label: true
        },
        {
          text: '工程',
          bold: true,
          color: 'danger',
          onClick: function() {
            $.alert('你选择了工程')
          }
        },
        {
          text: '经管',
          onClick: function() {
            $.alert('你选择了经管')
          }
        },
        {
          text: '医学',
          onClick: function() {
            $.alert('你选择了医学')
          }
        }
      ]
      const buttons2 = [
        {
          text: '取消',
          bg: 'danger'
        }
      ]
      const groups = [buttons1, buttons2]
      $.actions(groups)
    })
  },
  data () {
    return {
      items: [],
      loading: false,
      path: '/home',
      title: '旅游活动',
      tasks: [
        {
          id: 1,
          title: 'card1',
          content: '这里是第1个card，下拉刷新会出现第2个card'
        }
      ]
    }
  },
  computed: {
    length () {
      return this.tasks.length
    }
  },
  methods: {
    refreshAll () {
      $.showIndicator()
      setTimeout(function () {
        console.log('refreshAll')
        let cardNumber = $(this.$el).find('.card').length
        let cardHTML = '<div class="card">' +
          '<div class="card-header">card' + cardNumber + '</div>' +
          '<div class="card-content">' +
          '<div class="card-content-inner">' +
          '这里是第' + cardNumber + '个card，下拉刷新会出现第' + (cardNumber + 1) + '个card。' +
          '</div>' +
          '</div>' +
          '</div>'
        $(this.$el).find('.allTasks').prepend(cardHTML)
        // 加载完毕需要重置
        $.pullToRefreshDone('.pull-to-refresh-content')
        $.hideIndicator()
      }.bind(this), 1500)
    },
    refreshMine () {
      $.showIndicator()
      setTimeout(function () {
        console.log('refreshMine')
        let num = this.length + 1
        let title = `card${num}`
        let content = `这里是第${num}个card，下拉刷新会出现第${num + 1}个card。`
        this.tasks.push({
          id: num,
          title: title,
          content: content
        })
        $.pullToRefreshDone('.pull-to-refresh-content')
        $.hideIndicator()
      }.bind(this), 1500)
    },
    loadMore () {
      if (this.loading) {
        return
      }
      this.loading = true
      let scroller = $('.list')
      loader.show()
      setTimeout(() => {
        let i = this.length
        this.items.push({
          id: i,
          name: `demo${i + 1}`
        })
        let scrollTop = scroller[0].scrollHeight - scroller.height() - 20
        scroller.scrollTop(scrollTop)
        this.loading = false
        loader.hide()
      }, 1500)
    }
  },
  components: {
    VNav,
    VButton,
    VIcon,
    VTabs,
    VTab,
    VLayer,
    VCardContainer,
    Card
  }
}
</script>

<style>
.tasks {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.tasks-tabs .buttons-tab {
  z-index: 10;
  margin-top:2.2rem;
}
#all-tasks, #my-tasks {
  top: 2rem;
}
.card-header{
 background-color:red;
 text-align:center;
 min-height:4.2rem;
 color:white;
}

.card-content-inner{
 min-height:5rem;
}

.card{
 box-shadow: 0 10px 10px gray;
 margin:1rem;
}

.sub-btn{
 display:inline-block;
 background-color:red;
 margin:auto;
 text-align:center;
 line-height:2rem;
 height:2rem;
 width:7rem;
 color:white;
}
</style>
